<template>
	<div class="app-container">
		<!-- 高级查询 -->
		<el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="仓库">

      	    <el-select v-model="queryParams.warehouseCode" filterable clearable placeholder="请选择" @change="handleSelectedWarehouse()">
      	    	<el-option v-for="item in  options.warehouseCodes" :key="item.id" :label="item.warehouserName"
      	    		:value="item.id">
      	    	</el-option>

      	    </el-select>
      	</el-form-item>
      	<el-form-item label="库区">

      	    <el-select v-model="queryParams.areaCode" clearable placeholder="请选择">
      	    	<el-option v-for="item in  options.areas" :key="item.id" :label="item.areaName"
      	    		:value="item.id">
      	    	</el-option>
      	    </el-select>
      	</el-form-item>
      <el-form-item label="选择商品车：" prop="materialNo">
        <el-input v-model="queryParams.materialNo" class="filter-item" >
          <i slot="suffix" class="el-input__icon el-icon-search" @click="openMaterialSelector" />
        </el-input>
        <warehouse-customer-selector ref="warehouseCustomerSelector" :visible.sync="materialSelectorVisible" @selected="handleMaterialSelected" />
      </el-form-item>





			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 工具栏 -->
		<el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialInLocation:moveDispatch']" type="primary" icon="el-icon-plus" size="mini" @click="handleMoveDispatch">选择出库</el-button>
      </el-col>
     <!-- <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialInLocation:update']" type="success" icon="el-icon-edit" size="mini" :disabled="isSingle" @click="handleEdit">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialInLocation:delete']" type="danger" icon="el-icon-delete" size="mini" :disabled="isMultiple" @click="handleRemove">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialInLocation:export']" type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col> -->
      <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
    </el-row>

		<!-- 数据列表 -->
		<el-table v-loading="loading" :data="page.records" highlight-current-row
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<!-- <el-table-column label="序号" type="index" width="55" align="center" /> -->
			<!-- <el-table-column label="区域编码" align="center" prop="warehouseCode" /> -->
		<!-- 	<el-table-column label="仓库" align="center" prop="stageNo" />
      <el-table-column label="库区" align="center" prop="areaNo" /> -->
      <el-table-column label="当前库位" align="center" prop="materialVehicleInLocationId" />

<el-table-column label="物品" align="center" prop="materialName" />
<el-table-column label="到货仓库名称" align="center" prop="deliveryWarehouseName" />
<el-table-column label="单号" align="center" prop="caseNo" />
<el-table-column label="送货地址" align="center" prop="consigneeAddress" />
<el-table-column label="品牌" align="center" prop="vehicleBrand" />
<el-table-column label="车型" align="center" prop="vehicleModel" />
			<el-table-column label="vin码" align="center" prop="vinNo" />
			<!--      <el-table-column label="有效期至" align="center" prop="validityDate" width="180">-->
			<!--        <template slot-scope="scope">-->
			<!--          <span>{{ parseTime(scope.row.validityDate, '{y}-{m}-{d}') }}</span>-->
			<!--        </template>-->
			<!--      </el-table-column>-->

			<!--      <el-table-column label="盘点号" align="center" prop="checkNo" width="180"/>-->
			<!-- <el-table-column label="排" align="center" prop="lotNo" />
      <el-table-column label="层" align="center" prop="cellNo" />
      <el-table-column label="格" align="center" prop="cellNo" /> -->

			<!--      <el-table-column label="创建时间" align="center" prop="createTime" width="180">-->
			<!--        <template slot-scope="scope">-->
			<!--          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>-->
			<!--        </template>-->
			<!--      </el-table-column>-->
			<!-- <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-hasPermission="['web:tbWmsMaterialInLocation:update']" size="mini" type="text"
						icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
					<el-button v-hasPermission="['web:tbWmsMaterialInLocation:delete']" size="mini" type="text"
						icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
				</template>
			</el-table-column> -->
		</el-table>

		<!-- 分页 -->
		<pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize"
			@pagination="handleQuery" />



    <!-- 转场调度对话框 -->
    <el-dialog :title="vehiclelnLocationDataFormDialog.title" :visible.sync="vehiclelnLocationDataFormDialog.visible" :close-on-click-modal="false" :before-close="resetVehiclelnLocationDataFormDialog" width="500px" append-to-body>
      <el-form ref="vehiclelnLocationDataForm" :model="vehiclelnLocationDataFormData" :rules="vehiclelnLocationDataFormRules" label-width="90px">

        <el-form-item label="选择仓库" prop="moveToWarehouseCode">
          <el-select  v-model="vehiclelnLocationDataFormData.moveToWarehouseCode" :filter-method="filterWarehouseMethod"
           prop="moveToWarehouseCode" placeholder="请选择"  filterable clearable style="width: 100%;">
            <el-option v-for="option in warehouseOptions" :key="option.id" :label="option.warehouserName" :value="option.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="承运人" prop="carrierNo">
          <el-select  v-model="vehiclelnLocationDataFormData.carrierNo" :filter-method="filterMethod1"
           prop="driverNos" placeholder="请选择"  filterable clearable style="width: 100%;" @change="isDisMethod" >
            <el-option v-for="option in carrierOptions" :key="option.id" :label="option.carrierName" :value="option.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="选择司机" prop="driverNos">
          <el-select v-bind:disabled="isDis" v-model="vehiclelnLocationDataFormData.driverNos" :filter-method="filterMethod" multiple
           prop="driverNos" placeholder="请选择"  filterable clearable style="width: 100%;">
            <el-option v-for="option in driverOptions" :key="option.id" :label="option.personName" :value="option.id"/>
          </el-select>
        </el-form-item>


        <!--  <el-form-item label="收货人：">
                 <el-form-item label="选择收货人" prop="driverNos">
                    <el-select  v-model="vehiclelnLocationDataFormData.consignee" :filter-method="filterMethod" multiple
                     prop="driverNos" placeholder="请选择"  filterable clearable style="width: 100%;">
                      <el-option v-for="option in driverOptions" :key="option.id" :label="option.personName" :value="option.id"/>
                    </el-select>

          </el-form-item>

          <el-form-item label="发货时间：" prop="requirePickupTime">
            <el-input v-model="vehiclelnLocationDataFormData.requirePickupTime" disabled />
          </el-form-item>


          <el-form-item label="到货时间：" prop="requirePickupTime">
            <el-input v-model="vehiclelnLocationDataFormData.requireDeliveryTime" disabled />
          </el-form-item> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmVehiclelnLocationDataFormDialog">确 定</el-button>
        <el-button @click="resetVehiclelnLocationDataFormDialog">取 消</el-button>
      </div>
    </el-dialog>

		<!-- 添加/修改对话框 -->
		<el-dialog :title="tbWmsMaterialInLocationFormDialog.title"
			:visible.sync="tbWmsMaterialInLocationFormDialog.visible" :close-on-click-modal="false" width="500px"
			append-to-body>
			<el-form ref="tbWmsMaterialInLocationForm" :model="tbWmsMaterialInLocationFormData"
				:rules="tbWmsMaterialInLocationFormRules" label-width="80px">
				<!-- <el-form-item label="" prop="siteCode">
          <el-input v-model="tbWmsMaterialInLocationFormData.siteCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="warehouseCode">
          <el-input v-model="tbWmsMaterialInLocationFormData.warehouseCode" placeholder="请输入" />
        </el-form-item> -->
				<el-form-item label="仓库" prop="stageNo">
					<el-input v-model="tbWmsMaterialInLocationFormData.stageNo" placeholder="请输入库架编号" />
				</el-form-item>
        <el-form-item label="库区" prop="areaNo">
        	<el-input v-model="tbWmsMaterialInLocationFormData.areaNo" placeholder="请输入库架编号" />
        </el-form-item>
        <el-form-item label="库位" prop="locationNo">
        	<el-input v-model="tbWmsMaterialInLocationFormData.locationNo" placeholder="请输入库架编号" />
        </el-form-item>
				<el-form-item label="入库编码" prop="orderNo">
					<el-input v-model="tbWmsMaterialInLocationFormData.orderNo" placeholder="请输入物品编号" />
				</el-form-item>
				<!-- <el-form-item label="" prop="customerNo">
          <el-input v-model="tbWmsMaterialInLocationFormData.customerNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="batchNo">
          <el-input v-model="tbWmsMaterialInLocationFormData.batchNo" placeholder="请输入" />
        </el-form-item> -->
				<el-form-item label="vin码" prop="vinNo">
					<el-input v-model="tbWmsMaterialInLocationFormData.vinNo" placeholder="请输入数量" />
				</el-form-item>
				<!-- <el-form-item label="" prop="validityDate">
          <el-date-picker v-model="tbWmsMaterialInLocationFormData.validityDate" type="date" value-format="yyyy-MM-dd" size="small" style="width: 200px" placeholder="选择" clearable />
        </el-form-item>
        <el-form-item label="" prop="version">
          <el-input v-model="tbWmsMaterialInLocationFormData.version" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="checkNo">
          <el-input v-model="tbWmsMaterialInLocationFormData.checkNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="lotNo">
          <el-input v-model="tbWmsMaterialInLocationFormData.lotNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="cellNo">
          <el-input v-model="tbWmsMaterialInLocationFormData.cellNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="customerId">
          <el-input v-model="tbWmsMaterialInLocationFormData.customerId" placeholder="请输入" />
        </el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirmTbWmsMaterialInLocationFormDialog">确 定</el-button>
				<el-button @click="resetTbWmsMaterialInLocationFormDialog">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import TbWmsMaterialReceiptLineApi from '@/api/web/TbWmsMaterialReceiptLineApi'
  import TbWmsMaterialDeliveryLineApi from '@/api/web/TbWmsMaterialDeliveryLineApi'
 import WarehouseCustomerSelector from '@/views/pms/tWhWarehouseCustomerMaterial/WarehouseCustomerSelector'
  import TPoPurchaseOrderItemApi from '@/api/tms/TPoPurchaseOrderItemApi'
  import WarehouseApi from '@/api/basic/WarehouseApi'
  import WarehouseAreaApi from '@/api/web/WarehouseAreaApi'
  import DriverApi from '@/api/web/DriverApi'
  import CarrierApi from '@/api/basic/CarrierApi'
  import CustomerConsigneeSelector from '@/views/basic/customerConsignee/CustomerConsigneeSelector'

  const defaultTbWmsMaterialInLocationFormData = {
		siteCode: null,
		warehouseCode: null,
		locationNo: null,
		materialNo: null,
		customerNo: null,
		batchNo: null,
		quantity: null,
		validityDate: null,
		version: null,
		checkNo: null,
		lotNo: null,
		cellNo: null,
		customerId: null,
	}
  const defaultVehiclelnLocationDataFormDataData = {
    vehicleInLocIds: [],
    driverNos: null,
    carrierNo: null,
    moveToWarehouseCode: null
  }
	export default {
		name: 'TbWmsMaterialInLocationList',
    components: {
       CustomerConsigneeSelector,
       WarehouseCustomerSelector
    },
		data() {
			return {
		     options: {
          warehouseCodes: [],
            areas: [],
         sysYnTypeOptions: this.$constant.sysYnTypeOptions
        },
				queryParams: {
					siteCode: null,
					warehouseCode: null,
          deliveryType: null,
          status: null,
					locationNo: null,
					materialNo: null,
					materialName: null,
					customerNo: null,
					areaCode: null,
					quantity: null,
					validityDate: null,
					version: null,
					checkNo: null,
					lotNo: null,
					cellNo: null,
					customerId: null,
          receiptType: 'vehicle',
					isValid: this.$constant.Y
				},
				page: {
					current: 1,
					pageSize: 10,
					total: 0,
					records: []
				},
				tbWmsMaterialInLocationFormDialog: {
					title: '',
					visible: false
				},
        vehiclelnLocationDataFormDialog: {
          title: '',
          visible: false
        },
        vehiclelnLocationDataFormRules: {
        },
        vehiclelnLocationDataFormData: {
          vehicleInLocIds: [],
          driverNos: null,
          carrierNo: null,
          moveToWarehouseCode: null
        },

				tbWmsMaterialInLocationFormData: Object.assign({}, defaultTbWmsMaterialInLocationFormData),
				tbWmsMaterialInLocationFormRules: {
					siteCode: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					warehouseCode: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					locationNo: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					materialNo: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					customerNo: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					quantity: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					version: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
				},
				loading: true,
				searchVisible: true,
				multipleSelection: [],
				isSingle: true,
				isMultiple: true,
            materialSelectorVisible: false,
        isSelect: false,
        isDis: false,
        driverSelect: [],
        driverOptions: [],
        warehouseSelect: [],
        warehouseOptions: [],
        carrierSelect: [],
        carrierOptions: []

			}
		},
		created() {
			this.handleQuery()
			this.loadOptions()
		},
		methods: {
			loadOptions() {
        let that = this
        WarehouseApi.list().then(response => {
          that.options.warehouseCodes = response.data
        })

        DriverApi.list().then(res =>{
          this.driverSelect = res.data
          this.driverOptions = res.data.slice(0,100)
        })

        WarehouseApi.list({warehouseTypeList:['remodel','packing']}).then(res =>{
          this.warehouseSelect = res.data
          this.warehouseOptions = res.data.slice(0,100)
        })

        CarrierApi.list().then(res =>{
          this.carrierSelect = res
          this.carrierOptions = res.slice(0,100)
        })
      },
      openMaterialSelector() {
        this.$refs.warehouseCustomerSelector.loadData()
        this.materialSelectorVisible = true
      },
      handleMaterialSelected(obj) {
            this.queryParams.materialNo =  obj.id
        },
			handleAdd() {
				this.openTbWmsMaterialInLocationFormDialog()
			},
			handleRemove(row) {
				const ids = row.id || this.multipleSelection.map(item => item.id)
				this.$confirm('是否确认删除数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					return TbWmsMaterialReceiptLineApi.remove(ids)
				}).then(() => {
					this.handleQuery()
					this.$message.success('删除成功')
				})
			},
			handleEdit(row) {
				const id = row.id || this.multipleSelection.map(item => item.id)[0]
				this.openTbWmsMaterialInLocationFormDialog(id)
			},
			handleQuery() {
				this.loading = true
			//	TbWmsMaterialReceiptLineApi.page(this.queryParams, this.page).then(response => {

        this.queryParams.deliveryType = "vehicle";
         this.queryParams.status = "newRece";
       TbWmsMaterialDeliveryLineApi.page(this.queryParams, this.page).then(response => {
					this.page.records = response.data.records
					this.page.total = response.data.total
					this.loading = false
				}, () => {
					this.loading = false
				})
			},
			handleExport() {
				this.$confirm('是否确认导出数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					return TbWmsMaterialReceiptLineApi.exportData(this.queryParams)
				}).then(response => {
					this.$common.download(response.msg)
				})
			},
			openTbWmsMaterialInLocationFormDialog(id) {
				this.resetTbWmsMaterialInLocationFormDialog()
				this.tbWmsMaterialInLocationFormDialog.visible = true
				if (id) {
					this.tbWmsMaterialInLocationFormDialog.title = '货区货物清单-修改'
					TbWmsMaterialReceiptLineApi.get(id).then(response => {
						this.tbWmsMaterialInLocationFormData = {
							...this.tbWmsMaterialInLocationFormData,
							...response.data
						}
					})
				} else {
					this.tbWmsMaterialInLocationFormDialog.title = '货区货物清单-添加'
				}
			},
			confirmTbWmsMaterialInLocationFormDialog() {
				this.$refs['tbWmsMaterialInLocationForm'].validate(valid => {
					if (valid) {
						if (this.tbWmsMaterialInLocationFormData.id) {
							TbWmsMaterialReceiptLineApi.edit(this.tbWmsMaterialInLocationFormData).then(
							response => {
								this.$message.success('修改成功')
								this.tbWmsMaterialInLocationFormDialog.visible = false
								this.handleQuery()
							})
						} else {
							TbWmsMaterialReceiptLineApi.add(this.tbWmsMaterialInLocationFormData).then(response => {
								this.$message.success('添加成功')
								this.tbWmsMaterialInLocationFormDialog.visible = false
								this.handleQuery()
							})
						}
					}
				})
			},

       handleSelectedWarehouse() {
        let  that = this
        if (this.queryParams.warehouseCode != null){
          WarehouseAreaApi.list(this.queryParams).then(response => {
            that.options.areas = response.data
          })
        }

      },
			resetTbWmsMaterialInLocationFormDialog() {
				this.tbWmsMaterialInLocationFormDialog = {
					title: '',
					visible: false
				}
				this.tbWmsMaterialInLocationFormData = Object.assign({}, defaultTbWmsMaterialInLocationFormData)
				this.resetForm('tbWmsMaterialInLocationForm')
			},
			handleSelectionChange(selection) {
				this.multipleSelection = selection
        this.isSelect = true
				this.isSingle = selection.length !== 1
				this.isMultiple = !selection.length

			},
      handleMoveDispatch(){
        console.log(this.multipleSelection.length)
        if(this.multipleSelection.length>0){
          this.openFormDialog();
        }else{
          this.$message.error('请选择库存')
        }

      },
      openFormDialog(){
        this.vehiclelnLocationDataFormDialog.visible = true
        this.vehiclelnLocationDataFormDialog.title = '转场调度'
      },
      confirmVehiclelnLocationDataFormDialog() {
        for(let item of this.multipleSelection){
          this.vehiclelnLocationDataFormData.vehicleInLocIds.push(item.id)
        }

        this.$refs['vehiclelnLocationDataForm'].validate(valid => {
          TPoPurchaseOrderItemApi.moveDispatch(this.vehiclelnLocationDataFormData).then(res =>{

            this.$message.success('调度成功')
            this.resetVehiclelnLocationDataFormDialog()
            this.handleQuery()
          })

        })
      },
      resetVehiclelnLocationDataFormDialog() {
        this.vehiclelnLocationDataFormDialog = {
          title: '',
          visible: false
        }
        this.vehiclelnLocationDataFormData = Object.assign({}, defaultVehiclelnLocationDataFormDataData)
        this.resetForm('vehiclelnLocationDataForm')
      },
      filterMethod(query) {
        if(query == ''){
          this.driverOptions = this.driverSelect.slice(0,100)
        }
        else{
          let result = []  // 存储符合条件的下拉选项
          this.driverSelect.forEach(val=>{
              if(val.personName.indexOf(query)!=-1) result.push(val)
          })
          this.driverOptions = result.slice(0,100)  // 只取前100个
        }
      },
      filterMethod1(){
        if(query == ''){
          this.carrierOptions = this.carrierSelect.slice(0,100)
        }
        else{
          let result = []  // 存储符合条件的下拉选项
          this.carrierSelect.forEach(val=>{
              if(val.carrierName.indexOf(query)!=-1) result.push(val)
          })
          this.carrierOptions = result.slice(0,100)  // 只取前100个
        }
      },
      filterWarehouseMethod(query) {
        if(query == ''){
          this.warehouseOptions = this.warehouseSelect.slice(0,100)
        }
        else{
          let result = []  // 存储符合条件的下拉选项
          this.warehouseSelect.forEach(val=>{
              if(val.warehouserName.indexOf(query)!=-1) result.push(val)
          })
          this.warehouseOptions = result.slice(0,100)  // 只取前100个
        }
      },
      isDisMethod(e){
        if(e!='' && e!=null){
          this.isDis = true
        }else{
          this.isDis = false
        }
      },
			resetQuery() {
				this.page.current = 1
				this.resetForm('queryForm')
				this.handleQuery()
			}
		}
	}
</script>
